<template>	
 <div class='app-container'>
    <div class='app-box clear'>
        <div class='Insurance'>
            <div class="head">
              报表模板设置
              <el-button size="mini" type="info" class='toRight' @click="togo">
              返回
              </el-button>
            </div>
            <div class="InsuranceList">
               <div class="list-head">
                   <div>报表模板</div>
                   <div>状态</div>
                   <div style="text-align:right;padding-right:15px">操作</div>
               </div>
               <div class="list-con" v-for="(item,index) in listCon" :key="item.name">
                 <div class="list-con-item">
                    <div>{{item.name}}</div>
                    <div></div>
                    <div @click="toDialog(index)">
                        <!-- <i class="iconfont icon-plus"></i>模板 -->
                        <el-button size='mini'><i class="iconfont icon-plus" style="position:relative;top:1px;"></i>模板</el-button>
                    </div>
                 </div>
                   
                  <div class="list-con-select"  v-for="(modal,ind) in item.exportTemplates" :key="modal.templateName"> 
                      <div><i class="iconfont icon-lingxing" style="vertical-align:middle;font-size:14px;color:#2a96a9"></i> {{modal.templateName}}</div>
                      <div v-if="modal.isActive"><i class="iconfont icon-icon01" style="color: rgb(56, 158, 13);vertical-align:middle"></i>已启用</div>
                       <div v-else><i class="iconfont icon-icon01" style="color: rgb(207, 19, 34);vertical-align:middle"></i>已禁用</div>
                      <div>
                        <span @click="openDialog(modal.id)">修改</span>
                        <span v-if="modal.isActive" @click="changeStatusF(index,ind,modal.id)">停用</span>
                        <span v-else @click="changeStatusF(index,ind,modal.id)">启用</span>
                      </div>
                  </div>
               </div>
                
            </div>
        </div>
        <el-dialog
        title="配置模板"
        :visible.sync="dialogVisible"
        :close-on-click-modal='false'
        width="805px">
        <el-form :model="formlabel" :rules="rules" ref="formlabel" label-width="100px" class="demo-ruleForm">
            <el-form-item label="模板名字" prop="name">
                <el-input v-model="formlabel.name" size="mini" style="width:350px;"></el-input>
            </el-form-item>
        </el-form>
        <div>
            <SortableList v-model="lists" :distance="10" lockOffset="0%" lockAxis="y" axis="y" @input='checkallarr'>
                <InnerList v-for="(list, index) in lists" :key="list.groupName" :index="index" collection="lists" :list="list" v-on:selects="hhg"></InnerList>
            </SortableList>
        </div>
        <div v-if="showit" style="color:#cf1212;font-size:12px;">模板列表不能为空</div>
        <div style="text-align:center;margin-top:30px;">
            <el-button size='mini' type="primary" @click="sure" :loading="sureLoading">确定</el-button>
        </div>
        </el-dialog>
    </div>
 </div>
</template>	
<script>
import InnerList from "../demo/sortdemo/inner.vue";
import { ContainerMixin, ElementMixin } from "vue-slicksort";
import Vue from "vue";
const SortableList = {
  mixins: [ContainerMixin],
  template: `
    <ul class="list1">
      <slot />
    </ul>
  `
};
export default {
  data() {
      var nametest = (rule, value, callback) => {
        if (!value || value == "") {
        return callback(new Error("请输入模板名称"));
        } else {
          if(this.nowName == value){
            callback();
          }else{
             this.post(
                { templateName: value },
                "services/app/guaranteeSlip/ExistTemplate "
            ).then(res => {
                if (res.success) {
                    if (res.result.exist
                    ) {
                        return callback(new Error("模板名称已存在"));
                    } else {
                        callback();
                    }
                }
            });
          }
       
        }
    };
    return {
      lists:[],
      checkArr:[],
      dialogVisible: false,
      showit:false,
      listCon: [
        {
          name: "保单查询列表",
          exportTemplates: [
            //   {
            //   name:'',
            //   status:'',
            //   id:'',
            //   value:[]
            // }
          ]
        }
      ],
      isEdit:false,
      editId:null,
      sureLoading:false,
      nowName:'',
      formlabel: {
        name: ""
      },
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" },
        { validator: nametest, trigger: "blur" }]
      }
    };
  },
  components: {
    SortableList,
    InnerList
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 列表
    getList() {
      let params = {
        templateType: 0,
        isAll:true
      };
      this.post(params, "services/app/guaranteeSlip/GetExportTemplates").then(
        rs => {
          if (rs.success) {
            rs.result[0].name = "保单查询列表";
            this.listCon = rs.result;
            console.log(this.listCon);
          }else{
               this.$notify.error({
                    title: '错误',
                    message: res.error.message
                });
          }
        }
      );
    },
    // 添加
    toDialog(index) {
      this.dialogVisible = true;
      this.isEdit = false;
      this.editId = null;
      let params = {
        templateType: 0
      };
      this.post(params, "services/app/guaranteeSlip/GetExportTemplatesColumns").then(
        rs => {
          if (rs.success) {
            console.log(rs.result);
            this.lists = rs.result;
          }else{
               this.$notify.error({
                    title: '错误',
                    message: res.error.message
                });
          }
        }
      );
      this.$refs["formlabel"].resetFields();
    },
    // inner组件数据
    hhg(val) {
      let str = JSON.stringify(this.lists);
      let arr = JSON.parse(str);
      let cAll = [];
      arr.forEach((i, index) => {
        if (i.groupName == val.groupName) {
          arr[index] = val;
          console.log(arr);
        } else {
          // cAll = [];
          // for (let j = 0; j < i.excelColumn.length; j++) {
          //   if (i.excelColumn[j].isDefault) {
          //     cAll.push(i.excelColumn[j]);
          //   }
          // }
          // i.excelColumn = cAll;            //提交选中的
        }
      });
      console.log(arr);
      this.checkArr = arr;
    },
    // 组移动数据
    checkallarr(val) {
      // let cAll = [];
      let str = JSON.stringify(val);
      let arr = JSON.parse(str);
      // if (arr.length != 0) {
      //   arr.forEach(k => {
      //     cAll = [];
      //     for (let j = 0; j < k.excelColumn.length; j++) {
      //       if (k.excelColumn[j].isDefault) {
      //         cAll.push(k.excelColumn[j]);
      //       }
      //     }
      //     k.excelColumn = cAll;
      //   });
      // }
      // console.log(arr);
      // this.checkArr = arr;            //提交选中的
      console.log(arr);
      this.checkArr = arr;
    },
    // 编辑
    openDialog(id) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.editId = id;
      let params = {
        id : id 
      };
      this.post(params, "services/app/guaranteeSlip/GetTemplateDetails").then(
        rs => {
          if (rs.success) {
            console.log(rs.result);
            this.formlabel.name = rs.result.templateName;
            this.nowName = rs.result.templateName;
            this.lists = rs.result.exportTemplateGroup;
          }else{
               this.$notify.error({
                    title: '错误',
                    message: res.error.message
                });
          }
        }
      );
      this.$refs["formlabel"].resetFields();
    },
    sure() {
      this.$refs["formlabel"].validate(valid => {
        if (valid) {
          this.sureLoading = true;
          this.nowName = '';
          this.checkallarr(this.lists);
          if(this.isEdit && this.editId){
            if(this.checkArr.length == 0){
              this.showit = true;
              this.sureLoading = false;
            }else{
              this.showit = false;
              this.dialogVisible = false;
              //   编辑
              let params = {
                  templateName:this.formlabel.name,
                  templateColumnList:this.checkArr,
                  templateType:0,
                  id:this.editId
              }
              this.post(params,'services/app/guaranteeSlip/updateTemplate').then(rs => {
                  this.sureLoading = false;
                  if(rs.success){
                      this.getList();
                  }else{
                      this.$notify.error({
                          title: '错误',
                          message: rs.error.message
                      });
                  }
              })
            }
          }else{
            if(this.checkArr.length == 0){
              this.showit = true;
              this.sureLoading = false;
            }else{
              this.showit = false;
              this.dialogVisible = false;
              //   新建
              let params = {
                  templateName:this.formlabel.name,
                  templateColumnList:this.checkArr,
                  templateType:0
              }
              this.post(params,'services/app/guaranteeSlip/addTemplate').then(rs => {
                  this.sureLoading = false;
                  if(rs.success){
                      this.getList();
                  }else{
                      this.$notify.error({
                              title: '错误',
                              message: rs.error.message
                          });
                  }
              })
            }
          }
        }
      });
    },
    // 状态改变
    changeStatusF(index, ind, id) {
      let params = {
        id: id
      };
      this.post(params, "services/app/guaranteeSlip/TemplateStateSet").then(
        rs => {
          if (rs.success) {
            if (this.listCon[index].exportTemplates[ind].isActive) {
              Vue.set(
                this.listCon[index].exportTemplates[ind],
                "isActive",
                false
              );
            } else {
              Vue.set(
                this.listCon[index].exportTemplates[ind],
                "isActive",
                true
              );
            }
          }
        }
      );
    },
    togo(){
      this.$router.go(-1);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss"  scoped>
.toRight{
	float: right
}
.list1 {
  list-style: none;
  /* min-width:334px; */
  margin:0;
  max-width: 775px;
  display: inline-block;
  max-height: 400px;
  overflow: auto;
  border: 1px solid #e6e3e3;
  // padding: 10px;
}
.icon-plus {
  font-size: 13px;
  margin-right: 5px;
}
.app-box {
  .Insurance {
    .head {
      // margin-bottom: 30px
      font-size: 20px;
      font-weight: 600;
    }
    .InsuranceList {
      padding: 30px 0;
      .list-head {
        display: flex;
        text-align: center;
        background: #334750;
        color: #fff;
        // padding: 20px 0;
        line-height: 40px;
        height: 40px;
        div:nth-child(1) {
          width: 65%;
        }
        div:nth-child(2) {
          width: 15%;
        }
        div:last-child {
          width: 20%;
        }
      }
      .list-con {
        // display: flex;
        text-align: center;
        // border-bottom:1px solid  #EEEEEE;
        color: #333;
        line-height: 40px;
        // height: 40px;
        .list-con-item {
          width: 100%;
          display: flex;
          border-bottom: 1px solid #eeeeee;
          div:nth-child(1) {
            width: 65%;
            text-align: left;
            padding: 0 20px;
          }
          div:nth-child(2) {
            width: 15%;
          }
          div:last-child {
            width: 20%;
            cursor: pointer;
            text-align: right;
            padding: 0 15px;
          }
        }
        .list-con-select {
          width: 100%;
          display: flex;
          div:nth-child(1) {
            width: 65%;
            text-align: left;
            padding: 0 35px;
            border-bottom: 1px solid #eee;
          }
          div:nth-child(2) {
            width: 15%;
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;
          }
          div:last-child {
            width: 20%;
            text-align: right;
            padding: 0 15px;
            border-bottom: 1px solid #eee;
            span {
              cursor: pointer;
              color: #027dca;
            }
          }
        }
        .list-con-select:last-child {
          border-bottom: 1px solid #eeeeee;
          div:nth-child(1) {
            border-bottom: none;
          }
          div:nth-child(2) {
            border-bottom: none;
          }
          div:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
